<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>法国皇家Royal Canin 小型犬幼犬离乳期奶糕粮 1kg</title>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="./css/login.css" />
    <link rel="stylesheet" href="./css/indextwo.css" />
    <link rel="stylesheet" href="./css/item.css" />
  </head>
  <style></style>
  <body>
    <div class="zhong">
      <div class="toop">
        <ul class="scc1">
          <li style="width: 150px"><a href="#">收藏波奇商城</a></li>
          <li><a href="#">城市</a></li>
        </ul>
        <ul class="scc2">
          <li>
            <a href="#">波奇首页</a>
            <div class="daf1"></div>
          </li>
          <li>
            <a href="#">关于波奇</a><span class="sp1">|</span>
            <div class="daf1"></div>
          </li>
          <li>
            <a href="#">手机版</a><span class="sp1">|</span>
            <div class="daf1"></div>
          </li>
          <li style="text-indent: 20px">
            <a href="zuche.html">注册</a><span class="sp1">|</span>
          </li>
          <li style="text-indent: 20px">
            <a href="login.html">登录</a><span class="sp1">|</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="box" style="background-color: #fff">
      <div class="box1">
        <a href="index.html"
          ><img src="../img/logo3.png" alt="log" class="im"
        /></a>
        <div class="enz">
          <p><input type="text" /><input type="button" value="搜索" /></p>
          <ul>
            <li style="width: 65px">热门搜索：</li>
            <a href="#"><li>主粮</li></a>
            <a href="#"><li>零食</li></a>
            <a href="#"><li>医疗</li></a>
            <a href="#"><li>保健</li></a>
            <a href="#"><li>猫砂</li></a>
            <a href="#" style="color: #ee5533"><li>日用</li></a>
            <a href="#"><li style="width: 65px">玩具美容</li></a>
          </ul>
        </div>
        <div class="enze"></div>
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="dao">
      <ul>
        <li class="dag" style="width: 200px">全部商品分类</li>
        <a href="#"><li>首页</li></a>
        <a href="#"><li>狗狗</li></a>
        <a href="#"><li>猫猫</li></a>
        <a href="#"><li>小宠</li></a>
        <a href="#"><li>水族</li></a>
        <a href="#"><li>全球购</li></a>
        <a href="#"><li>创意生活</li></a>
        <a href="#"><li>体验馆</li></a>
        <a href="#"
          ><li style="float: right">
            <a href="javascript:;" id="my-cart" onclick="toMyCart()">购物车</a>
          </li></a
        >
      </ul>
    </div>
    <!-- 导航栏灰色条条 -->
    <div class="hui">
      <div class="se">
        <span><a href="#">波奇商城</a></span
        ><span>&gt;</span><span><a href="#">品牌馆</a></span
        ><span>&gt;</span><span>皇家</span><span>&gt;</span>
      </div>
    </div>
    <!-- 商品简介 -->
    <div class="spins">
      <div id="fdj">
        <div class="small">
          <img src="../png/shoppicpath11616383560_y.jpg" />
          <div class="mask"></div>
        </div>

        <div class="big">
          <img class="big-img" src="../png/shoppicpath11616383560_y.jpg" />
        </div>
      </div>
      <div class="kong"></div>
      <div id="box">
        <!-- <h1></h1>
            <p></p>
            <img src="" alt="">
            <p></p>
            <button onclick="addCart()">加入购物车</button> -->
      </div>
      <div class="spin3">
        <div class="cla1">
          <div class="cla1-1">
            <div class="clle1"></div>
            <p>100%</p>
            <p>正品保障</p>
          </div>
          <div class="cla1-2">
            <div class="clle2"></div>
            <p>7省</p>
            <p>满59免运费</p>
          </div>
          <div class="cla1-3">
            <div class="clle3"></div>
            <p>7天</p>
            <p>无忧退换</p>
          </div>
        </div>
        <div class="cll1">
          <p>所属品牌：皇家</p>
          <p>商品编号：100151</p>
          <p>月销指数：1271件</p>
          <p>满意指数： 4.9分</p>
          <p style="text-align: center">已有4841人评论</p>
        </div>
        <div class="cll1" style="height: 70px">
          <p style="margin-top: 30px">授权认证： 授权文件</p>
          <p>
            对商品有疑问？ <a href="#"><span class="an"></span></a>
          </p>
        </div>
        <div class="cll1">
          <div class="tpi"><img src="../img/app_small.jpg" alt="" /></div>
          <div class="tpir">
            <p>波奇客户端</p>
            <p>注册领取150，爆款包邮1元起</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品分类 -->

    <!-- 商品列表 -->

    <!-- 底部1 -->
    <div class="hengf">
      <div class="hengfu">
        <div class="heng1">
          <div class="fu1"></div>
          <p>正品保障</p>
          <p>全场正品&nbsp;&nbsp;假一赔十</p>
        </div>
        <div class="heng2">
          <div class="fu2"></div>
          <p>闪电发货</p>
          <p>7省满59免运费</p>
        </div>
        <div class="heng3">
          <div class="fu3"></div>
          <p>无忧退换</p>
          <p>七天退换&nbsp;&nbsp;购买无忧</p>
        </div>
        <div class="heng4">
          <div class="fu4"></div>
          <p>优质服务</p>
          <p>品类丰富&nbsp;&nbsp;多快好省</p>
        </div>
        <div class="heng5" style="border-right: 0px">
          <div class="fu5"></div>
          <p>诚信电商</p>
          <p>宠友放心&nbsp;&nbsp;值得信赖</p>
        </div>
      </div>
    </div>
    <!-- 底部2 -->
    <div class="xin">
      <div class="shou">
        <div class="chou1">
          <h2>新手上路</h2>
          <a href="#"><p>购物流程</p></a>
          <a href="#"><p>现金账户</p></a>
          <a href="#"><p>优惠券</p></a>
          <a href="#"><p>订单查询</p></a>
          <a href="#"><p>服务协议</p></a>
        </div>
        <div class="chou1">
          <h2>购买方式</h2>
          <a href="#"><p>余额支付</p></a>
          <a href="#"><p>网上支付</p></a>
          <a href="#"><p>银行汇款</p></a>
          <a href="#"><p>货到付款</p></a>
        </div>
        <div class="chou1">
          <h2>配送方式</h2>
          <a href="#"><p>配送方式</p></a>
          <a href="#"><p>收费标准</p></a>
          <a href="#"><p>配送时间</p></a>
        </div>
        <div class="chou1">
          <h2>售后服务</h2>
          <a href="#"><p>如何退换货</p></a>
          <a href="#"><p>如何退款</p></a>
          <a href="#"><p>退换货流程</p></a>
          <a href="#"><p>客服电话</p></a>
        </div>
        <div class="chou5">
          <h2>常见问题</h2>
          <a href="#"><p>注册登录</p></a>
          <a href="#"><p>波奇豆</p></a>
          <a href="#"><p>热点问题</p></a>
        </div>
      </div>
    </div>
    <!-- 这里是底部 -->
    <div class="dib">
      <div class="dibu" style="clear: both">
        <ul>
          <li><a href="#">关于波奇</a><span>|</span></li>
          <li><a href="#">投资者关系</a><span>|</span></li>
          <li><a href="#">诚聘英才</a><span>|</span></li>
          <li><a href="#">联系我们</a><span>|</span></li>
          <li><a href="#">网站地图</a><span>|</span></li>
          <li><a href="#">意见反馈</a><span>|</span></li>
          <li><a href="#">帮助中心</a><span>|</span></li>
          <li style="width: 170px">客服热线：400-820-6098</li>
        </ul>
        <ul>
          <li><a href="#">沪公网安备 31011502004955号</a><span>|</span></li>
          <li><a href="#">沪ICP备13034501号-2</a><span>|</span></li>
          <li style="width: 160px">增值电信业务经营许可证：</li>
          <li style="width: 130px"><a href="#"> 沪B2-20140120</a></li>
        </ul>
        <p>
          Copyright © 2007- 2021 Boqii.com All Rights Reserved
          光橙（上海）信息科技有限公司 版权所有
        </p>
        <ul>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
        </ul>
        <p>
          违法和不良信息举报电话：<a href="#">021-68826169</a
          >&nbsp;|&nbsp;举报邮箱：<a href="#">zhengls@boqii.com</a>
        </p>
        <p>如网民接到962110电话，请立即接听</p>
      </div>
    </div>
    <!-- <div class="cheb">
      <a href="javascript:;" id="my-cart" onclick="toMyCart()">购物车</a>
    </div> -->

    <script type="text/javascript">
      // 1- 显示和隐藏
      let fdj = document.querySelector("#fdj");
      let big = document.querySelector(".big");
      let mask = document.querySelector(".mask");
      let bigImg = document.querySelector(".big-img");

      fdj.onmouseenter = function () {
        big.style.display = "block";
        mask.style.display = "block";
        //mask的宽度 /小图的宽度= 大bigdiv 的宽度 /  大图的宽度
        // offsetWidth 如果元素是隐藏的 那么offsetWidth 都是0
        let bigImgWidth =
          (big.offsetWidth * fdj.offsetWidth) / mask.offsetWidth;
        console.log(bigImgWidth);
        bigImg.style.width = bigImgWidth + "px";
      };
      // 大图的宽度 = 大bigdiv 的宽度*小图的宽度 /mask的宽度

      fdj.onmouseleave = function () {
        big.style.display = "none";
        mask.style.display = "none";
      };

      fdj.onmousemove = function (evt) {
        console.log(evt.pageX - fdj.offsetLeft, evt.offsetX);

        // 鼠标在 fdj 内部的 坐标
        let offsetX = evt.pageX - fdj.offsetLeft;
        let offsetY = evt.pageY - fdj.offsetTop;

        // 遮罩在fdj 内部的 坐标

        let maskX = offsetX - mask.offsetWidth / 2;
        let maskY = offsetY - mask.offsetWidth / 2;
        if (maskX < 0) {
          maskX = 0;
        }
        if (maskY < 0) {
          maskY = 0;
        }
        if (maskY > fdj.offsetHeight - mask.offsetHeight) {
          maskY = fdj.offsetHeight - mask.offsetHeight;
        }
        if (maskX > fdj.offsetHeight - mask.offsetHeight) {
          maskX = fdj.offsetHeight - mask.offsetHeight;
        }
        mask.style.left = maskX + "px";
        mask.style.top = maskY + "px";

        // 图片的坐标 = - 遮罩的坐标 * 大图比小图
        let bigImgX = (-maskX * bigImg.offsetWidth) / fdj.offsetWidth;
        let bigImgY = (-maskY * bigImg.offsetWidth) / fdj.offsetWidth;

        bigImg.style.left = bigImgX + "px";
        bigImg.style.top = bigImgY + "px";
      };
      //
      //跳转
      console.log(location.search);
      // 把搜索字符串 ?id=22&a=2&b=2 转为对象
      let searchObj = new URLSearchParams(location.search);
      console.log(searchObj);
      //获取id的值
      let pid = searchObj.get("id");
      console.log(pid);
      let detailProductAPI = "http://jx.xuzhixiang.top/ap/api/detail.php";
      axios.get(detailProductAPI, { params: { id: pid } }).then((r) => {
        //r.data 服务器返回的数据
        let pObj = r.data.data;
        console.log(pObj);
        if (pObj) {
          //
          let str = `<h1>${pObj.pname}</h1>
          <img src="${pObj.pimg}" alt="">
          <p>${pObj.pprice}</p>
          <p>${pObj.pdesc}</p>
          <input type="number" name="" id="ipt" value="1">
          <button onclick="addCart()" class="ipp">加入购物车</button>`;

          let box = document.querySelector("#box");
          box.innerHTML = str;
        } else {
          alert("商品不存在请登录后查看");
        }
      });
      //加入购物车
      async function addCart() {
        //获取参数
        let uid = localStorage.getItem("id");
        pid;
        let ipt = document.querySelector("#ipt");
        let pnum = ipt.value;
        let params = { uid, pid, pnum };
        console.log(params);
        let addCartAPI = "http://jx.xuzhixiang.top/ap/api/add-product.php";
        let res = await axios.get(addCartAPI, { params });
        console.log(res.data);
        alert("加入购物车成功");
      }

      function toMyCart() {
        //获取参数
        let uid = localStorage.getItem("id");
        if (uid) {
          location.href = "cart.html";
        } else {
          location.href = "login.html";
        }
      }
    </script>
  </body>
</html>
